<template>
  <div>
    <!-- 公示学况信息 -->
    <div class="studyInfo">
      <div class="gongshi">学况信息</div>
      <div v-show="isEnd">
        <el-alert
          v-if="isSuccess"
          title="学况信息上传成功"
          type="success"
          effect="dark"
        >
        </el-alert
        ><el-alert v-else title="学况信息上传失败" type="error" effect="dark">
        </el-alert>
      </div>
      <el-form
        ref="studyForm"
        :rules="rules"
        :model="studyForm"
        label-width="130px"
        status-icon
      >
        <el-form-item label="受捐者编号" prop="recipientId">
          <el-input
            autocomplete="off"
            v-model="studyForm.recipientId"
          ></el-input>
        </el-form-item>
        <el-form-item label="考试名称" prop="examinationName">
          <el-input
            autocomplete="off"
            v-model="studyForm.examinationName"
            placeholder="例：第一次模拟考"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级排名" prop="classRanking">
          <el-input
            type="Number"
            autocomplete="off"
            v-model="studyForm.classRanking"
          ></el-input>
        </el-form-item>
        <el-form-item label="考试时间">
          <el-date-picker
            type="date"
            placeholder="考试时间"
            v-model="time"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-button
          type="warning"
          plain
          style="margin-left: 30px; margin-bottom: 10px; display: block"
          @click="addDomain"
          round
          >新增单科成绩</el-button
        >
        <el-form-item v-for="domain in domains" :key="domain.index">
          <el-input
            v-model="domain.subject"
            placeholder="请输入科目"
            class="input-with-subject"
          ></el-input>
          <el-input
            v-model="domain.value"
            placeholder="请输入分数"
            class="input-with-fraction"
          ></el-input>
          <el-button
            circle
            @click.prevent="removeDomain(domain)"
            icon="el-icon-delete"
            v-if="domains.length !== 1"
          ></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="resetForm('studyForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 公示获奖信息 -->
  </div>
</template>
<script>
import { publisStudyInfo } from "network/charity.js";
import { formatDate } from "common/utils";
export default {
  name: "uploadPrize",
  data() {
    return {
      domains: [
        {
          subject: "",
          value: ""
        }
      ],
      time: "",
      isSuccess: "",
      isEnd: "",
      studyForm: {
        examinationName: "",
        examinationResults: "",
        classRanking: "",
        recipientId: "",
        examinationTime: ""
      },
      rules: {
        examinationName: [
          {
            required: true,
            message: "考试名称不能为空",
            pattern: /\S/,
            trigger: "blur"
          }
        ],
        classRanking: [
          {
            required: true,
            message: "排名不能为空",
            pattern: /\S/,
            trigger: "blur"
          }
        ],
        recipientId: [
          {
            required: true,
            message: "受捐助者编号不能为空",
            pattern: /\S/,
            trigger: "blur"
          }
        ],
        examinationTime: [
          {
            required: true,
            message: "日期输入有误",
            pattern: /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    removeDomain(item) {
      var index = this.domains.indexOf(item);
      if (index !== 0) {
        this.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.domains.push({
        key: Date.now(),
        value: ""
      });
    },
    onSubmit() {
      let academic = this.domains;
      let str = "";
      // 拼接成绩字符串
      academic.forEach(element => {
        str += element.subject + ":" + element.value + ",";
      });
      let site = str.lastIndexOf(",");
      this.studyForm["examinationResults"] = str.substring(0, site);
      // alert(this.studyForm["examinationResults"]);
      for (let key in this.studyForm) {
        if (this.studyForm[key] === "") {
          this.$message({
            showClose: true,
            message: "请确认信息是否无误!",
            type: "error"
          });
          return;
        }
      }
      publisStudyInfo(this.studyForm)
        .then(res => {
          if (res.msg == "success") {
            this.isEnd = true;
            this.isSuccess = true;
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  watch: {
    time() {
      let d = this.time;
      try {
        this.studyForm.examinationTime = formatDate(d, "yyyy-MM-dd");
      } catch (error) {}
    }
  },
  created() {
    this.studyForm.recipientId = this.$route.query.id;
  }
};
</script>
<style lang="scss" scoped>
.studyInfo {
  width: 60vw;
  margin-left: 20vw;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 3px;
  box-shadow: 0px 0px 8px rgb(200, 192, 184);
}
.el-form-item {
  display: inline-block;
  width: 50%;
}
.gongshi {
  // width: 80px;
  color: red;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 2vw;
  background-color: rgb(255, 255, 255);
  font-size: 20px;
  font-weight: bold;
}
.input-with-fraction {
  width: 100px;
  margin-bottom: 10px;
  margin-right: 10px;
}
.input-with-subject {
  width: 100px;
  margin-bottom: 10px;
  margin-right: 10px;
}
</style>
